<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="承租方详情"
    width="800px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-row :gutter="20">
        <el-col :span="12">
          <span class="label">联系人:</span>
          <span class="value">{{ form.contact }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">联系方式:</span>
          <span class="value">{{ form.phone }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">相关方类型:</span>
          <span class="value">{{ getDictValue('tenantType', form.type) }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">相关方名称:</span>
          <span class="value">{{ form.name }}</span>
        </el-col>
        <el-col
          :span="12"
          v-if="
            ['企业', '政府'].includes(getDictValue('tenantType', form.type))
          "
        >
          <span class="label">统一社会信用代码:</span>
          <span class="value">{{ form.code }}</span>
        </el-col>
        <el-col :span="12" v-else>
          <span class="label">身份证号码:</span>
          <span class="value">{{ form.code }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">作业园区:</span>
          <span class="value">{{ form.parkName }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">施工类型:</span>
          <span class="value">{{
            getDictValue('construction_type', form.workType)
          }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">作业地点:</span>
          <span class="value">{{ form.workLocation }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">作业时间:</span>
          <span class="value"
            >{{ form.workStartTime }} - {{ form.workEndTime }}</span
          >
        </el-col>
        <el-col :span="24">
          <span class="label">事由:</span>
          <span class="value">{{ form.reason }}</span>
        </el-col>
        <el-col :span="24">
          <span class="label">作业地点图片:</span>
          <span class="value">
            <FileList :list="form.imgFileList" fileType="picture" />
          </span>
        </el-col>
        <el-col :span="24">
          <span class="label">附件资料:</span>
          <span class="value">
            <FileList :list="form.fileList" width="300" />
          </span>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue'
import FileList from '@/components/fileList/index.vue'
import { relatedDetail } from '@/api/manager/dataManage/related'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  async () => {
    if (props.detail.pkid && dialogVisible.value) {
      handleDetail()
    }
  },
)
const emit = defineEmits(['close'])
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
  emit('close')
}
const form = ref({
  imgFileList: [],
  fileList: [],
})
const handleDetail = async () => {
  const res = await relatedDetail({ pkid: props.detail.pkid })
  if (res.success) {
    form.value = { ...res.data }
  } else {
    ElMessage.error(res.message)
  }
}
defineExpose({ dialogVisible })
</script>
<style lang="scss" scoped>
.title {
  width: 100%;
  padding: 0 0 5px 15px;
  font-size: 14px;
  line-height: 14px;
  font-weight: 400;
  color: #151515;
  position: relative;
  &::before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    top: 6px;
    left: 0px;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>
